<template>
  <div class="accountInfo">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="17">
            <el-card class="box-card">
              <p style="font-size:24px;margin: 0 0 18px">账户信息</p>
              <el-form
                label-width="100px"
                class="demo-ruleForm"
                :model="updateForm" status-icon :rules="rules" ref="updateForm"
              >
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="updateForm.name"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="updateForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="tel">
                  <el-input type="tel" v-model="updateForm.tel"></el-input>
                </el-form-item>
                <el-row>
                  <el-button type="success" style="float:right" @click="updateUserInfo">提交</el-button>
                </el-row>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="1">
            <account></account>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>   //定义页面数据和实现生命周期接口
  import account from "~/pages/account/account.vue";
  import topBar from '~/components/topBar.vue'
  import * as AccountInfoRequest from '../../assets/accountInfo/accountInfo'   //引入功能模块，在代码中调用模块方法
  export default {                                     //设置属性的默认值
    components: {                                      // 获取当前页面路由的component
      account,
      topBar
    },
    data() {
      let Name=(rule, value, callback)=> {            //自定义正则表达式验证
        if (!value) {
          return callback(new Error('姓名不能为空'));
        }
      };
      let Email=(rule, value, callback)=> {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
      };
      let checkTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
      };
      return {
        updateForm: {
          name: '',
          email: '',
          tel: "",
        },

        rules: {
          name: [{
            validator: Name, trigger: 'blur'
          }],
          email: [{
            validator: Email, trigger: 'blur'
          }],
          telephone: [
            {validator: checkTel, trigger: 'blur'}
          ]
        }
      };
    },
    methods:{
      updateUserInfo(){
        AccountInfoRequest.updateUserInfo(this)
      }
    },
    mounted() {
      this.updateForm.name = this.$store.state.userInfo.username
      this.updateForm.email = this.$store.state.userInfo.email
      this.updateForm.tel = this.$store.state.userInfo.phone
    }
  };
</script>

<style lang="less">   // template 模板的组件样式，决定组件应该如何显示
  .accountInfo {
    height: 80vh;
    .box-card {
      border-radius: 12px;
      .el-input__inner:hover {
        border-color: red
      }
    }
  }
</style>
